<template>
  <div id="Home">
    <img src="../../assets/img/banner.jpg" alt="" class="c-banner"/>
    <main class="l-main">
      <ul class="c-nav">
        <li class="c-nav__item" v-for="(item,key) in HOME_NAV_TOP" :key="key" @click="$pushRoute('./analysis/main')">
          <img class="c-nav__pic" :src="item.img" alt="">
          <label class="c-nav__label">{{item.name}}</label>
        </li>
      </ul>
      <ol class="c-entry">
        <li class="c-entry__item" v-for="(item,key) in HOME_NAV_BOTTOM" :key="key"
            @click="$pushRoute('./early-warning/list/main')">
          <div class="c-entry__pic"></div>
          <label class="c-entry__label">{{item.name}}</label>
        </li>
      </ol>
    </main>
  </div>

</template>

<script>


  import {HOME_NAV_BOTTOM, HOME_NAV_TOP} from "@/config/const";

  export default {
    name: "Home",
    data() {
      return {
        HOME_NAV_TOP, HOME_NAV_BOTTOM
      }
    },
    methods: {},
    computed: {},
    created() {
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/common";

  #Home {
    padding-bottom: 20px;
    .c-banner {
      width: 100%;
      height: 250px;
    }
    .l-main {
      padding: 0 10px;
    }
    .c-nav {
      $segment: 10px;
      @include flex-between;
      flex-wrap: wrap;
      margin: $segment 0;
      &__item {
        flex-shrink: 0;
        margin-top: 10px;
        width: calc(50% - #{$segment / 2});
        height: 80px;
        @include flex-center;
        position: relative;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 2px 3px 5px #ccc;
      }
      &__pic {
        @include absoluteFull();
        width: 100%;
        height: 100%;
      }
      &__label {
        color: white;
        font-size: 20px;
        font-weight: bold;
        position: relative;
        z-index: 9;
      }
    }
    .c-entry {
      flex-wrap: wrap;
      display: flex;
      margin-left: -38px;
      &__pic {
        @include round(60px);
        @include shadow-blur;
      }
      &__item {
        flex-shrink: 0;
        margin-left: 38px;
        margin-top: 13px;
        display: flex;
        flex-direction: column;
        align-items: center;
        $arr: (#f37b1d, #fbbd08, #8dc63f, #39b54a);
        @for $i from 1 through 4 {
          &:nth-child(4n+#{$i}) .c-entry__pic {
            background: nth($arr, $i);
          }
        }
      }
      &__label {
        font-size: 12px;
        margin-top: 8px;
      }
    }
  }
</style>
